<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 核心指标概览 -->
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="statistic-card">
          <div class="statistic-content">
            <div class="statistic-title">总用户数</div>
            <div class="statistic-value">{{ systemStats.totalUsers }}</div>
          </div>
          <div class="statistic-icon">
            <i class="el-icon-user" style="color: #409EFF"></i>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="statistic-card">
          <div class="statistic-content">
            <div class="statistic-title">菜品总数</div>
            <div class="statistic-value">{{ systemStats.totalDishes }}</div>
          </div>
          <div class="statistic-icon">
            <i class="el-icon-food" style="color: #67C23A"></i>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="statistic-card">
          <div class="statistic-content">
            <div class="statistic-title">食材总数</div>
            <div class="statistic-value">{{ systemStats.totalIngredients }}</div>
          </div>
          <div class="statistic-icon">
            <i class="el-icon-apple" style="color: #E6A23C"></i>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="statistic-card">
          <div class="statistic-content">
            <div class="statistic-title">昨日登录用户</div>
            <div class="statistic-value">{{ systemStats.yesterdayLoginUsers }}</div>
          </div>
          <div class="statistic-icon">
            <i class="el-icon-s-data" style="color: #F56C6C"></i>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 用户分布饼图 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户性别分布</span>
          </div>
          <div ref="genderChart" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 菜系分布饼图 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜系分布</span>
          </div>
          <div ref="cuisineChart" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 用户年龄分布饼图 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户年龄分布</span>
          </div>
          <div ref="ageChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 菜品热度TOP6 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜品点赞热度TOP6</span>
          </div>
          <div ref="hotChart" style="height: 350px;"></div>
        </el-card>
      </el-col>

      <!-- 菜品评分TOP6 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜品历史评分TOP6</span>
          </div>
          <div ref="ratingChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSystemStats, getUserDistribution, getDishHotStats, getDishRatingStats, getCuisineDistribution } from '@/api/diet/statistics'

export default {
  name: 'DietStatistics',
  data() {
    return {
      systemStats: {
        totalUsers: 0,
        totalDishes: 0,
        totalIngredients: 0,
        yesterdayLoginUsers: 0
      }
    }
  },
  mounted() {
    this.getSystemStatistics()
    this.initCharts()
  },
  methods: {
    async getSystemStatistics() {
      try {
        const response = await getSystemStats()
        this.systemStats = response.data
      } catch (error) {
        console.error('获取系统统计数据失败:', error)
      }
    },
    async initCharts() {
      await this.$nextTick()
      this.initGenderChart()
      this.initCuisineChart()
      this.initAgeChart()
      this.initHotChart()
      this.initRatingChart()
    },
    async initGenderChart() {
      try {
        const response = await getUserDistribution()
        const chart = echarts.init(this.$refs.genderChart)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [{
            name: '性别分布',
            type: 'pie',
            radius: '50%',
            data: response.data.gender,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        chart.setOption(option)
      } catch (error) {
        console.error('获取用户性别分布失败:', error)
      }
    },
    async initCuisineChart() {
      try {
        const response = await getCuisineDistribution()
        const chart = echarts.init(this.$refs.cuisineChart)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [{
            name: '菜系分布',
            type: 'pie',
            radius: '50%',
            data: response.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        chart.setOption(option)
      } catch (error) {
        console.error('获取菜系分布失败:', error)
      }
    },
    async initAgeChart() {
      try {
        const response = await getUserDistribution()
        const chart = echarts.init(this.$refs.ageChart)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [{
            name: '年龄分布',
            type: 'pie',
            radius: '50%',
            data: response.data.age,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        chart.setOption(option)
      } catch (error) {
        console.error('获取用户年龄分布失败:', error)
      }
    },
    async initHotChart() {
      try {
        const response = await getDishHotStats()
        const chart = echarts.init(this.$refs.hotChart)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: response.data.map(item => item.name)
          },
          series: [{
            name: '收藏数',
            type: 'bar',
            data: response.data.map(item => item.value)
          }]
        }
        chart.setOption(option)
      } catch (error) {
        console.error('获取菜品热度统计失败:', error)
      }
    },
    async initRatingChart() {
      try {
        const response = await getDishRatingStats()
        const chart = echarts.init(this.$refs.ratingChart)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: response.data.map(item => item.name)
          },
          series: [{
            name: '评分',
            type: 'bar',
            data: response.data.map(item => item.value)
          }]
        }
        chart.setOption(option)
      } catch (error) {
        console.error('获取菜品评分统计失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.statistic-card {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.statistic-content {
  flex: 1;
}

.statistic-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.statistic-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.statistic-icon {
  font-size: 40px;
}

.box-card {
  margin-bottom: 20px;
}
</style>